<script setup lang="ts">
  import { nextTick, ref, useTemplateRef, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { useAutoRequest } from '@/hooks/arco/useAutoLoading';
  import { createElder } from '@/api/file-management/file';
  import EditElder from './edit-modal/edit-elder.vue';
  import EditBed from './edit-modal/edit-bed.vue';
  import EditService from './edit-modal/edit-service.vue';

  const router = useRouter();

  const formIndex = ref(1);

  const form1 = useTemplateRef<any>('form1');
  const form2 = useTemplateRef<any>('form2');
  const form3 = useTemplateRef<any>('form3');

  const onNextStep = async () => {
    if (formIndex.value === 1) {
      await form1.value.validate();
      localStorage.setItem('form1', JSON.stringify(form1.value.getData()));
    } else if (formIndex.value === 2) {
      await form2.value.validate();
      localStorage.setItem('form2', JSON.stringify(form2.value.getData()));
    } else if (formIndex.value === 3) {
      await form3.value.validate();
      localStorage.setItem('form3', JSON.stringify(form3.value.getData()));
    }

    formIndex.value += 1;
  };

  const clearCache = () => {
    localStorage.removeItem('form1');
    localStorage.removeItem('form2');
    localStorage.removeItem('form3');
  };

  watch(
    formIndex,
    (val: number) => {
      nextTick(() => {
        if (val === 1) {
          const form1Data = JSON.parse(localStorage.getItem('form1') || '{}');
          form1.value?.setData(form1Data);
        } else if (val === 2) {
          const form2Data = JSON.parse(localStorage.getItem('form2') || '{}');
          form2.value?.setData(form2Data);
        } else {
          const form3Data = JSON.parse(localStorage.getItem('form3') || '{}');
          form3.value?.setData(form3Data);
        }
      });
    },
    {
      immediate: true,
    }
  );

  const [saveLd, save] = useAutoRequest(createElder, {
    onSuccess: () => {
      clearCache();
      router.back();
    },
  });

  const onSubmit = async () => {
    await form3.value.validate();
    localStorage.setItem('form3', JSON.stringify(form3.value.getData()));

    const data1 = JSON.parse(localStorage.getItem('form1') || '{}');
    const data2 = JSON.parse(localStorage.getItem('form2') || '{}');
    const data3 = form3.value.getData();
    save({
      ...data1,
      ...data2,
      ...data3,
    });
  };
</script>

<template>
  <div>
    <div class="flex flex-col h-full px-[150px] gap-5 items-center">
      <a-steps v-model:current="formIndex" class="w-[500px]">
        <a-step>长者信息</a-step>
        <a-step>床位信息</a-step>
        <a-step>服务信息</a-step>
      </a-steps>

      <div class="w-[500px] flex-1 pt-8">
        <EditElder
          v-if="formIndex === 1"
          ref="form1"
          key="form1"
          :show-in-modal="false"
        />

        <EditBed
          v-if="formIndex === 2"
          key="form2"
          ref="form2"
          :show-in-modal="false"
        />

        <EditService
          v-if="formIndex === 3"
          key="form3"
          ref="form3"
          :show-in-modal="false"
        />
      </div>

      <a-space class="self-end justify-end">
        <a-button
          :disabled="formIndex === 1"
          type="primary"
          @click="formIndex--"
        >
          <div class="flex items-center">
            <icon-left />
            <span class="leading-none">上一步</span>
          </div>
        </a-button>

        <a-button
          v-if="formIndex === 3"
          type="primary"
          :loading="saveLd"
          @click="onSubmit"
        >
          <template #icon>
            <icon-save />
          </template>
          提交
        </a-button>

        <a-button v-else type="primary" @click="onNextStep">
          <div class="flex items-center">
            <span class="leading-none">下一步</span>
            <icon-right />
          </div>
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
